<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Slider</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }

        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

        .card-wrapper{
            max-width: 1100px;
            margin: 0 60px 35px;
            padding: 20px 10px;
            overflow: hidden;
        }

        .card-list .card-item{
            list-style: none;
        }

        .card-list .card-item .card-link{
            user-select: none;
            display: block;
            background: #fff;
            padding: 18px;
            border-radius: 12px;
            text-decoration: none;
            border: 2px solid transparent;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
            transition: 0.2s ease;
        }

        .card-list .card-item .card-link:active{
            cursor: grabbing;
        }

        .card-list .card-item .card-link:hover{
            border-color: #5372f0;
        }

        .card-list .card-link .card-image{
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: 10px;
        }

        .card-list .card-link .badge{
            color: blue;
            margin: 16px 0 18px;
            padding: 8px 16px;
            font-weight: 500;
            font-size: 0.95rem;
            background: #dde4ff;
            width: fit-content;
            border-radius: 50px;
        }

        .card-list .card-link .card-title{
            font-size: 16px;
            color: #000;
            font-weight: 100;
        }

        .card-list .card-link .card-button{
            height: 35px;
            width: 35px;
            color: #5372f0;
            border-radius: 50%;
            margin: 30px 0 5px;
            background: none;
            cursor: pointer;
            transform: rotate(-45deg);
            border: 2px solid #5382f0;
            transition: 0.4s ease;
        }

        .card-list .card-link:hover .card-button{
            color: #fff;
            background: #5372f0;
        }

        .card-wrapper .swiper-pagination-bullet{
            height: 13px;
            width: 13px;
            opacity: 0.5;
            background: #5372f0;
        }

        .card-wrapper .swiper-pagination-bullet-active{
            opacity: 1;
        }

        .card-wrapper .swiper-slide-button{
            color: #5372f0;
            margin-top: -35px;
        }

        @media screen and (max-width: 768px){
            .card-wrapper{
                margin: 0 10px 25px;
            }

            .card-wrapper .swiper-slide-button{
                display: none;
            }
        }
    </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container swiper">
    <div class="card-wrapper">
        <ul class="card-list swiper-wrapper">
            <li class="card-item swiper-slide">
                <a href="#" class="card-link">
                    <img src="https://plus.unsplash.com/premium_photo-1732736768075-4738ba4ccf1a?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                         class="card-image">
                    <p class="badge">Mountain</p>
                    <h2 class="card-title">An image slider is a web element that displays multiple images in a rotating
                        format, allowing users to navigate through visuals using arrows or indicators.</h2>
                    <button class="card-button"><i class="fa-solid fa-arrow-right"></i></button>
                </a>
            </li>
            <li class="card-item swiper-slide">
                <a href="#" class="card-link">
                    <img src="https://images.unsplash.com/photo-1720048169707-a32d6dfca0b3?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                         class="card-image">
                    <p class="badge">Laptop</p>
                    <h2 class="card-title">An image slider is a web element that displays multiple images in a rotating
                        format, allowing users to navigate through visuals using arrows or indicators.</h2>
                    <button class="card-button"><i class="fa-solid fa-arrow-right"></i></button>
                </a>
            </li>
            <li class="card-item swiper-slide">
                <a href="#" class="card-link">
                    <img src="https://plus.unsplash.com/premium_photo-1732432913668-71a505632da1?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                         class="card-image">
                    <p class="badge">Lake</p>
                    <h2 class="card-title">An image slider is a web element that displays multiple images in a rotating
                        format, allowing users to navigate through visuals using arrows or indicators.</h2>
                    <button class="card-button"><i class="fa-solid fa-arrow-right"></i></button>
                </a>
            </li>
            <li class="card-item swiper-slide">
                <a href="#" class="card-link">
                    <img src="https://images.unsplash.com/photo-1731271140119-34ad9551ff10?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                         class="card-image">
                    <p class="badge">River</p>
                    <h2 class="card-title">An image slider is a web element that displays multiple images in a rotating
                        format, allowing users to navigate through visuals using arrows or indicators.</h2>
                    <button class="card-button"><i class="fa-solid fa-arrow-right"></i></button>
                </a>
            </li>
            <li class="card-item swiper-slide">
                <a href="#" class="card-link">
                    <img src="https://plus.unsplash.com/premium_photo-1731860726887-6b1cb8129b0f?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                         class="card-image">
                    <p class="badge">Pin on board</p>
                    <h2 class="card-title">An image slider is a web element that displays multiple images in a rotating
                        format, allowing users to navigate through visuals using arrows or indicators.</h2>
                    <button class="card-button"><i class="fa-solid fa-arrow-right"></i></button>
                </a>
            </li>
        </ul>

        <div class="swiper-pagination"></div>
        <div class="swiper-slide-button swiper-button-prev"></div>
        <div class="swiper-slide-button swiper-button-next"></div>
    </div>
</div>

<!-- partial -->
<script src='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'></script>
<script>
    new Swiper('.card-wrapper', {
        loop: true,
        speed: 700,
        spaceBetween: 30,

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true,
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        breakpoints: {
            0: {
                slidesPerView: 1
            },
            768: {
                slidesPerView: 2
            },
            1024: {
                slidesPerView: 3
            },
        }
    });
</script>
</body>
</html>